// 权限控制
// 1、路由权限控制
// 2、菜单权限控制

// 应用启动的时候，权限就应该立刻生效
// Main.js初始化的时候，就立刻执行一下permission.js
import router from "./router";
import { getToken } from "./utils/auth"
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from "./store";
// 导入动态路由表
import {asyncRoutes} from '@/router/asyncRoutes'
const WHITELIST = ['/login', '/404']
router.beforeEach(async (to, from, next) => {
  // to:到哪里去，目标路由对象
  // from：从哪里开，来源路由对象
  // next：放行函数(在分支中都应该有且只有一个next)
  NProgress.start() // 开启进度条
  // token可以从vuex和本地获得
  if (getToken()){
    // 判断有token
    if (to.path === '/login'){
      next('/')
    } else {
      // 这个位置是最适合的调用actions函数
      next()
      // 判断vux中有没有用户数据，如果有就发送请求，如果没有就发送请求
      if (!store.state.user.userInfo.userId) {
        // store.dispatch返回的也是一个promise，所以要用await来获取结果
        const res = await store.dispatch('user/fetchUserInfo')
        // 权限控制在这里实现
        // 1、拿到两份数据，一份是menus数据（这就是分配给员工分配的权限），一份是动态路由数据(就是由权限控制的路由)
        const menus = res.roles.menus
        // console.log(menus, asyncRoutes)
        // 2、以menus为主对asyncRoutes做过滤,条件是：需要判断动态路由表中的每一项
        const filterRoutes =   asyncRoutes.filter(route => menus.includes(route.children[0].name))
        // console.log(filterRoutes)
        // 3、把动态路由添加到应用的路由系统里
        // 路由系统：浏览器中访问一个路径path，可以渲染对应的组件
        // 本地的动态路由默认情况下，不加入路由系统中，将符合条件的的动态路由加入路由系统中
        // 如果你配置了兜底路由path *,必须把它放到整个路由表的末尾[静态路由+动态路由+*]
        // 有问题的是：[静态 + * + 动态]：*是一个可以匹配所有路由的通配符
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }  ])
        // 4、把filterRoutes显示到菜单中
        // 因为之前渲染到左侧菜单的数据是静态的，就算我们将新的动态路由加入到路由系统中，他也不会变化
        // 让渲染左侧菜单的路由变成可变的，可以使用vuex维护左侧菜单的数据
        store.commit('menu/setMenuList', filterRoutes)
      }
      // store.dispatch('user/fetchUserInfo')
    }
  } else {
    // 没有token
    if (WHITELIST.includes(to.path)){
      next()
    } else {
      next('/login')
    }
  }
  // 结束进度条
  NProgress.done()
})
